<%@ page pageEncoding="utf-8" language="java"%>
<%@ include file="/commons/taglibs.jsp"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html:html>
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
	<html:base/>	
	<link rel="stylesheet" href="<c:out value="${ctx}"/>/styles/style1.css" type="text/css" />
	<link rel="stylesheet" href="<c:out value="${ctx}"/>/js/jquery/css/jquery-ui-1.8.16.custom.css" type="text/css" />
	<link rel="stylesheet" href="<c:out value="${ctx}"/>/js/jquery/css/jquery.multiselect.css" type="text/css" />
	<link rel="stylesheet" href="<c:out value="${ctx}"/>/js/jquery/css/jquery.multiselect.filter.css" type="text/css" />
	<title>書城編輯頁</title>
	<script type="text/javascript" src="<c:out value="${ctx}"/>/js/jquery/jquery.js"></script>
	<script type="text/javascript" src="<c:out value="${ctx}"/>/js/jquery/jquery.validate.min.js"></script>
	<script type="text/javascript" src="<c:out value="${ctx}"/>/js/jquery/jquery.metadata.js"></script>
	<script type="text/javascript" src="<c:out value="${ctx}"/>/js/jquery/jquery-ui-1.8.16.custom.min.js"></script>
	<script type="text/javascript" src="<c:out value="${ctx}"/>/js/jquery/jquery.multiselect.min.js"></script>
	<script type="text/javascript" src="<c:out value="${ctx}"/>/js/jquery/jquery.multiselect.filter.min.js"></script>
	
	<style type="">
	    .condition_area{margin: 5px; padding:5px; border: 1px solid #ddd; background: #69f; color:#333;}
	    .listTable{margin: 5px; font-size: 12px;  font-family: verdana; background: #E2E4FF;}
	    .listTable thead  {	cursor: pointer; color:#333;} 
		.listTable thead tr,.listTable tfoot tr {background: #E2E4FF;} 
		.listTable tbody tr {background: #f0f0f0; color:#333;} 
		.listTable td, th {	border: 1px solid white;}
		input:focus { border: 1px dotted black; }
		input.error { border: 1px dotted red; }	
		#mainForm label.error, label.error {color: red;}
		#mainForm label.error {	display: block;	margin-left: 1em; margin-top:3px; width: auto;}		
	</style>
</head>
<body>
<form id='mainForm' name='mainForm' action='<c:out value="${ctx}"/>/saveBookCity.do' method="post">
	<html:hidden property="op" name="lazyForm"/>
	<div id="DataArea">
	<table width="100%" border="0">
		<tr>
			<th class="th" colspan="2" ><bean:write property="op" name="lazyForm"/></th>
		</tr>
		<tr>
			<td class="title">ID</td>
			<td class="one">
			<html:text styleId="id" name="lazyForm" property="vo.id" size="20" />
			</td>
		</tr>
		<tr>
			<td class="title">書城名稱</td>
			<td class="one">
			<html:text styleClass="{validate:{required:true}}" styleId="cityname" name="lazyForm" property="vo.cityname" size="20"/>
			</td>
		</tr>
		<tr>
			<td class="title">Package</td>
			<td class="one">
			<html:text styleClass="{validate:{required:true}}" styleId="cityprefix" name="lazyForm" property="vo.cityprefix" size="20"/>
			</td>
		</tr>
		<tr>
			<td class="title">出版商</td>
			<td class="one">			
			  <html:select property="vo.cp.id" name="lazyForm" style="width:120px;">
	            <html:option value=""></html:option>
    			<html:optionsCollection name="lazyForm" label="cpName" value="id"  property="contextProviders"/>  
	     	  </html:select>
			</td>
		</tr>		
		<tr>
			<td class="title" >啟動旗標</td>
			<td class="one">
				<html:select name="lazyForm" property="vo.enable_flag">
					<html:option value="Y">是</html:option>
					<html:option value="N">否</html:option>
				</html:select>
			</td>
		</tr>
		<tr>
			<td class="title" >圖例模式</td>
			<td class="one">
				<html:select name="lazyForm" property="vo.image_mode">
					<html:option value="thumbImage">縮圖</html:option>
					<html:option value="iconImage">ICON</html:option>
				</html:select>
			</td>
		</tr>
		<tr>
			<td class="title" >商業模式</td>
			<td class="one">
				<html:select name="lazyForm" property="vo.bizmode">
					<html:option value="1">購買</html:option>
					<html:option value="2">訂閱</html:option>
					<html:option value="3">訂閱+購買</html:option>
				</html:select>
			</td>
		</tr>
		<tr>
		    <td class="title">圖書分類</td>
		    <td class="one">
		    	<div id="div_err_category" class="error"></div>
			    <div id="div_add_category" class="condition_area">
				         分類 
				    <select id="category_id" name="category_id" style="width:100px;">
				        <logic:iterate id="category" name="lazyForm" property="bookCategories">				       
				            <option value='<bean:write name="category" property="id"/>'><bean:write name="category" property="categoryname"/></option>
				        </logic:iterate>
				    </select>
					上層分類
				    <select id="parent_id" name="parent_id" style="width:100px;">
				        <option value="0"></option>
				        <logic:iterate id="category" name="lazyForm" property="bookCategories">
				            <option value='<bean:write name="category" property="id"/>'><bean:write name="category" property="categoryname"/></option>
				        </logic:iterate>
				    </select>
				   	 層級
				    <select id="level" name="level">
				        <option value="1">1</option><option value="2">2</option><option value="3">3</option><option value="4">4</option><option value="5">5</option>
				        <option value="6">6</option><option value="7">7</option><option value="8">8</option><option value="9">9</option><option value="10">10</option>
				    </select>
					啟動旗標		 
				    <select id="c_enable_flag" name="c_enable_flag">
				        <option value="Y">是</option>
						<option value="N">否</option>
				    </select>
				    <input type="button" class="add" id="btn_add_category" value="添加"/>
				</div>    
			    <table id="listTable1" class="listTable" cellspacing="1" cellpadding="2" width="98%">		    	
			        <thead><tr><th>分類</th><th>上級分類</th><th>層級</th><th>啟動旗標</th><th>操作</th></tr></thead>
			        <tbody>
			        <logic:iterate id="category" name="lazyForm" property="vo.categories">
			        <tr>
				        <td><input type="hidden" name="categories" value='<bean:write name="category" />'/><bean:write name="category" property="categoryName"/></td>
				        <td><bean:write name="category" property="parent_name"/></td>
				        <td><bean:write name="category" property="level"/></td>
				        <td><bean:write name="category" property="enable_flag"/></td>
				        <td>&nbsp;&nbsp;<a class="delete" href="#" >刪除</a></td>
			        </tr>
			        </logic:iterate>			        	       
			        </tbody>
			    </table>			    
		    </td>
		</tr>
		<tr>
		    <td class="title">選書</td>
		    <td class="one">
		    <div id="div_err_book" class="error"></div>
		    <div id="div_add_book" class="condition_area">
				書名
		        <select id="books">
		            <option value=""></option>
		            <logic:iterate id="bookItem" name="lazyForm" property="bookItems">
		            <option value='<bean:write name="bookItem" property="id"/>'><bean:write name="bookItem" property="bookname"/></option>
		            </logic:iterate>
		        </select>
				零售定價
		        <input type="text" id="sale_price" size="5" maxlength="5"/>
				書本額度
		        <input type="text" id="subscribe_quota" size="5" maxlength="5"/>
				啟動旗標
				<select id="b_enable_flag">
			        <option value="Y">是</option>
					<option value="N">否</option>
					<option value="T">測試</option>
			    </select>
			    <input type="button" class="add" id="btn_add_book" value="添加"/>			    
		    </div>
		    <table id="listTable2"  class="listTable" cellspacing="1" cellpadding="2" width="98%">
			    <thead><tr><th>書名</th><th>零售定價</th><th>書本額度</th><th>啟動旗標</th><th>操作</th></tr></thead>
			    <tbody>
			    <logic:iterate id="book" name="lazyForm" property="vo.books">
			        <tr id='<bean:write name="book" property="book_id"/>'>
				        <td><input type="hidden" name="books" value='<bean:write name="book" />'/><bean:write name="book" property="bookname"/></td>
				        <td><bean:write name="book" property="sale_price"/></td>
				        <td><bean:write name="book" property="subscribe_quota"/></td>
				        <td><bean:write name="book" property="enable_flag"/></td>
				        <td>&nbsp;&nbsp;<a class="delete" href="#" >刪除</a></td>
			        </tr>
			        </logic:iterate>
			    </tbody>
		    </table>	    
		    </td>
		</tr>
	</table>
	</div>
	<div id="send">
		<input type="submit" name="save" id="save" value=" 儲存" />
		<input type="button" name="back" id="back" value="上一頁" onclick="history.go(-1);" />
	</div>
</form>
<script type="text/javascript">

	var $book;
	$(function() {
		$("#mainForm").validate({
			meta: "validate",
			messages:{
				'vo.cityname':{
					required:"請輸入書城名稱",
				}			
			}
		});
		
		var checkAllText = "全選";
		var uncheckAllText="取消";
		var noneSelectedText = "請選擇";
		var selectedText = "已選  #";
		var label ='查找:';
		var placeholder = '請輸入關鍵字';
		var $category  = $("#category_id").multiselect({
			multiple: false,
			selectedList: 1,
			minWidth:140,
			checkAllText: checkAllText,
			uncheckAllText:uncheckAllText,
			noneSelectedText:noneSelectedText,
			selectedText: selectedText,
			position: { 
				my: 'center', 
				at: 'bottom'
			}
		}).multiselectfilter({
			label: '',
			width:80,
			placeholder: placeholder
	    });
		
		var $parent = $("#parent_id").multiselect({	
			multiple: false,
			selectedList: 1,
			minWidth:140,
			checkAllText: checkAllText,
			uncheckAllText:uncheckAllText,
			noneSelectedText:noneSelectedText,
			selectedText: selectedText,
			position: { 
				my: 'center', 
				at: 'bottom'
			}
		}).multiselectfilter({
			width:80,
			label: '',
			placeholder: placeholder
	    });
		
		$book = $("#books").multiselect({
			multiple: false,
			selectedList: 1,
			minWidth:180,
			checkAllText: checkAllText,
			uncheckAllText:uncheckAllText,
			noneSelectedText:noneSelectedText,
			selectedText: selectedText,
			position: { 
				my: 'left bottom', 
				at: 'left top'
			}
		}).multiselectfilter({
			label: label,
			placeholder: placeholder
	    });
		
		<logic:notEqual value="delete" name="lazyForm" property="op">
		bindEvent();
		</logic:notEqual>
		
		RefreshBookSelect();
			
		// Area update
		$('td input[name^="vo"]').attr('disabled', '<aa:area op="${lazyForm.map.op}" area="data" />');
		$('td select[name^="vo"]').attr('disabled', '<aa:area op="${lazyForm.map.op}" area="data" />');
		// $('td input[name="vo.id"]').attr('disabled', '<aa:area op="${lazyForm.map.op}" area="key" />');
		$('td input[name="vo.id"]').attr('disabled', 'disabled');
		
		<logic:equal value="delete" name="lazyForm" property="op">
			$parent.multiselect('disable');
			$category.multiselect('disable');
			$book.multiselect('disable');
			$(".add").attr('disabled', 'disabled');
			$("input[type=text],select").attr('disabled', 'disabled');
		</logic:equal>
	});
	
	function bindEvent(){
		
		$("#btn_add_category").click(function(){
			
			// check  parent_id = 0 level need =1  parent_id != 0 level need >1			
			if($("#parent_id").val()=="0" && $("#level").val() >1){
				$("#div_err_category").html("<label class='error'>" + "上層分類或層級設置有誤" + "</label>");
				return;
			}else if( $("#parent_id").val() != "0" && $("#level").val() ==1){
				$("#div_err_category").html("<label class='error'>" + "上層分類或層級設置有誤" + "</label>");
				return;
			}else{
				$("#div_err_category").html("");
			}
			// alert($("#category_id option:selected").text());
			var tr = $("<tr>");
			var rowVal = $("#category_id").val()+";" + $("#parent_id").val()+";"+$("#level").val()+";"+ $("#c_enable_flag").val();
		    $(tr).append('<td>' + '<input type="hidden" name="categories" value="'+ rowVal +'" />'+ $("#category_id option:selected").text() +'</td>');
		    $(tr).append('<td>' + $("#parent_id option:selected").text()+'</td>');
		    $(tr).append('<td>' + $("#level").val() + '</td>');
		    $(tr).append('<td>' + $("#c_enable_flag").val() + '</td>');
		    $(tr).append('<td>&nbsp;&nbsp;<a class="delete" href="#" >刪除</a></td>');
			$("#listTable1 tbody").append(tr);
			
			$("a.delete").click(function(){			
				var $theRow= $(this).parents("td:first").parents("tr:first");
				$($theRow).remove();
			});
		});
	
		$("#btn_add_book").click(function(){
			// check sale_price subscribe_quota
			$("#div_err_book").html("");
			var id = $("#books").val() ;
			var check = true;
			if(id==""){
				check=false;
			}			
			var sale_price =$("#sale_price").val();
			var subscribe_quota = $("#subscribe_quota").val();
			if($.trim(sale_price).length == 0 || !(/^(?:\d+|\d{1,3}(?:,\d{3})+)(?:\.\d+)?$/.test(sale_price))){
				$("#div_err_book").append("<label class='error'>" + "請正確輸入價格" + "</label>");
				check=false;
			}
			
			if($.trim(subscribe_quota).length == 0 || !(/^\d+$/.test(subscribe_quota)) ){
				$("#div_err_book").append("<label class='error'>" + "請正確輸入額度" + "</label>");
				check=false;
			}			
			if(!check) return;
			
			var selectedOption =  $("#books option:selected");
			var tr = $('<tr id="' + id + '"></tr>');
			var rowVal = id + ";" + sale_price + ";" + subscribe_quota + ";" + $("#b_enable_flag").val();
			$(tr).append('<td>' + '<input type="hidden" name="books" value="' + rowVal + '" />' + $(selectedOption).text() + '</td>');
			$(tr).append('<td>' + sale_price + '</td>');
			$(tr).append('<td>' + subscribe_quota + '</td>');
			$(tr).append('<td>' + $("#b_enable_flag").val() + '</td>');
			$(tr).append('<td>&nbsp;&nbsp;<a class="delete" href="#" >刪除</a></td>'); 
			$("#listTable2 tbody").append(tr);
			
			$("a.delete").click(function(){			
				var $theRow= $(this).parents("td:first").parents("tr:first");
				$($theRow).remove();
				RefreshBookSelect();
			});
			
			$(selectedOption).attr("selected",false);
			$(selectedOption).attr("disabled",true);
			$book.multiselect('refresh');
		});
		
		$("a.delete").click(function(){			
			var $theRow= $(this).parents("td:first").parents("tr:first");
			$($theRow).remove();
			RefreshBookSelect();
		});			
	}
	
	function RefreshBookSelect(){
		$("#books option").attr('disabled',false);
		$("#listTable2 tbody tr").each(function(){
			var id = $(this).attr('id');			
			$("#books option[value="+id+"]").attr('disabled',true);			
		});
		$book.multiselect('refresh');
	}
	
	
	</script>
</body>
</html:html>